﻿@{
    ViewBag.Title = "SalesVolume";
}

<h2>SalesVolume</h2>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/DashBoard/GetTopSellingProductDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: "Top 5 Selling Products",
                    legend: { position: 'right', textStyle: { color: 'blue', fontSize: 8} },
                    is3D: true
                };
                var chart = new google.visualization.PieChart(document.getElementById('chart_topsellingProduct_div'));
                chart.draw(tdata, options);
            });
    }
</script>

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawStackedBarChart);
    function drawStackedBarChart() {

        $.post('/DashBoard/GetSaleByBrandChartData', {},
    function (data) {
        var tdata = new google.visualization.DataTable(data,0.5);
        
        var options = {
            title: "Daily Brand  Summary",
            vAxis: { title: 'Volume' },
            hAxis: { title: 'Period' },
            legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
            isStacked:true,
                    

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_StackedBar_div'));
        chart.draw(tdata, options);
    });
    }
</script>

<table>
    <tr>
        <td>
            <div id="chart_topsellingProduct_div" style="width: 1000px; height: 300px;">
            </div>
        </td>
        
       
    </tr>
    <tr>
    <td>
         <div id="chart_StackedBar_div" style="width: 1000px; height: 300px;">
            </div>
        
        </td>
    </tr>
</table>
